HTML cheat sheet

This link will take you to the W3 Schools, a fantastic resource for HTML and other stuff.

Type this... ... to get this
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>The basic HTML document</title>     </head>          <body>         <p>Basic template for an HTML document</p>     </body> </html>  

Basic template for an HTML document
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Heading levels</title>     </head>          <body>         <h1>Level 1 heading</h1>         <h2>Level 2 heading</h2>         <h3>Level 3 heading</h3>         <h4>Level 4 heading</h4>         <h5>Level 5 heading</h5>         <h6>Level 6 heading</h6>     </body> </html>  

Level 1 heading

Level 2 heading

Level 3 heading

Level 4 heading

Level 5 heading
Level 6 heading
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Paragraphs</title>     </head>          <body>         <h1>Heading</h1>         <p>This is a paragraph.</p>         <p>This is another paragraph.</p>     </body> </html>  

Heading

This is a paragraph.

This is another paragraph.
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Links</title>     </head>          <body>         <h1 id="P1">First paragraph</h1>         <p>This <a href="http://www.wikipedia.org" title="Wikipedia">link</a> will take you to the Wikipedia home page.</p>         <h1>Second paragraph</h1>         <p>This <a href="crazy.html" title="crazy_language">link</a> will take you to a funny text that is stored on this server.</p>         <h1>Third paragraph</h1>         <p>Lorem ipsum dolor sit amet...</p>         <h1>Final paragraph</h1>         <p>This <a href="#P1">link</a> takes you to the first paragraph.</p>     </body> </html>  

First paragraph

This link will take you to the Wikipedia home page.

Second paragraph

This link will take you to a funny text that is stored on this server.

Third paragraph

Lorem ipsum dolor sit amet...

Final paragraph

This link takes you to the first paragraph.
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Images</title>     </head>          <body>         <p>An image from this server:</p>         <img src="Avatar.jpg" width="200px" height="180px" alt="avatar">         <p>An image from WikiMedia Commons:</p>         <img src="https://upload.wikimedia.org/wikipedia/commons/c/c5/Inland_Thornbill_%285669197054%29_-_edit.jpg" width="200px" height="120px" alt="bird">     </body> </html>  

An image from this server:

avatar

An image from WikiMedia Commons:

bird
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>iframes</title>     </head>          <body>         <iframe src="crazy.html" width="200px" height="150px" frameborder="1"></iframe>         <br />         <iframe name="myiframe"></iframe>         <p><a href="http://wikipedia.org" target="myiframe">link</a></p>         <iframe width="300" height="150" src="https://www.youtube.com/embed/0RtFkl-0xrc" title="YouTube math problem"></iframe>     </body> </html>  

link
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Unordered lists</title>     </head>          <body>         <ul>             <li>App Designer</li>             <li>Phire</li>             <li>Planner                 <ul>                     <li>SIS dev</li>                     <li>BA team</li>                 </ul>             </li>             <li>FootPrints</li>         </ul>     </body> </html>  
  • App Designer
  • Phire
  • Planner
    • SIS dev
    • BA team
  • FootPrints
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>ordered lists</title>     </head>          <body>         <p>A list ordered with numbers:</p>         <ol type="1">             <li>first item</li>             <li>second item</li>             <li>third item</li>         </ol>         <p>A list ordered with capital letters:</p>         <ol type="A">             <li>first item</li>             <li>second item</li>             <li>third item</li>         </ol>         <p>A list ordered with lowercase letters:</p>         <ol type="a">             <li>first item</li>             <li>second item</li>             <li>third item</li>         </ol>         <p>A list ordered with capital Roman numerals:</p>         <ol type="I">             <li>first item</li>             <li>second item</li>             <li>third item</li>         </ol>         <p>A list ordered with lowercase Roman numerals:</p>         <ol type="i">             <li>first item</li>             <li>second item</li>             <li>third item</li>         </ol>     </body> </html>  

A list ordered with numbers:

  1. first item
  2. second item
  3. third item

A list ordered with capital letters:

  1. first item
  2. second item
  3. third item

A list ordered with lowercase letters:

  1. first item
  2. second item
  3. third item

A list ordered with capital Roman numerals:

  1. first item
  2. second item
  3. third item

A list ordered with lowercase Roman numerals:

  1. first item
  2. second item
  3. third item
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Tables</title>     </head>          <body>         <p>A table without any decorations:</p>         <table>             <tr><th>Name</th><th>Department</th><th>Position</th></tr>             <tr><td>Christine</td><td>Library</td><td>Head of Acquisitions & Serials</td></tr>             <tr><td>Colleen</td><td>Enrolment Services</td><td>Senior Service Team Assistant</td></tr>             <tr><td>Julia</td><td>Art Gallery</td><td>Max Stern Curator</td></tr>         </table>         <p>Here we add a simple border:</p>         <table style = "border: 2px solid navy;">             <tr><th>Name</th><th>Department</th><th>Position</th></tr>             <tr><td>Christine</td><td>Library</td><td>Head of Acquisitions & Serials</td></tr>             <tr><td>Colleen</td><td>Enrolment Services</td><td>Senior Service Team Assistant</td></tr>             <tr><td>Julia</td><td>Art Gallery</td><td>Max Stern Curator</td></tr>         </table>         <p>Here we add some colour:</p>         <table style = "background-color: pink;">             <tr  style="background-color: navy; color: white; font-size:120%;"><th>Name</th><th>Department</th><th>Position</th></tr>             <tr><td>Christine</td><td>Library</td><td>Head of Acquisitions & Serials</td></tr>             <tr><td>Colleen</td><td>Enrolment Services</td><td>Senior Service Team Assistant</td></tr>             <tr><td>Julia</td><td>Art Gallery</td><td>Max Stern Curator</td></tr>         </table>         <p>And here we try various effects:</p>         <table>             <tr style="height:60px"><th>Name</th><th style="width:45%">Department</th><th>Position</th></tr>             <tr style="height:40px"><td>Christine</td><td style = "border-style: dotted;">Library</td><td>Head of Acquisitions & Serials</td></tr>             <tr><td>Colleen</td><td>Enrolment Services</td><td>Senior Service Team Assistant</td></tr>             <tr><td>Julia</td><td style="border: 1px solid black; border-radius: 10px;">Art Gallery</td><td>Max Stern Curator</td></tr>         </table>     </body> </html>  

A table without any decorations:

NameDepartmentPosition
ChristineLibraryHead of Acquisitions & Serials
ColleenEnrolment ServicesSenior Service Team Assistant
JuliaArt GalleryMax Stern Curator

Here we add a simple border:

NameDepartmentPosition
ChristineLibraryHead of Acquisitions & Serials
ColleenEnrolment ServicesSenior Service Team Assistant
JuliaArt GalleryMax Stern Curator

Here we add some colour:

NameDepartmentPosition
ChristineLibraryHead of Acquisitions & Serials
ColleenEnrolment ServicesSenior Service Team Assistant
JuliaArt GalleryMax Stern Curator

And here we try various effects:

NameDepartmentPosition
ChristineLibraryHead of Acquisitions & Serials
ColleenEnrolment ServicesSenior Service Team Assistant
JuliaArt GalleryMax Stern Curator
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>forms</title>     </head>          <body>         <form method="get">             <label for="email">Email:</label>             <input type="text" name="email" placeholder="Email" size="22px" maxlength="100" id="email">             <label for="password">Password:</label>             <input type="password" name="password" placeholder="Password" size="22px" maxlength="30" id="password">             <input type="submit" value="Login">         </form>     </body> </html>  
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>text formatting</title>     </head>          <body>         <p>Here are some examples of text decoration in HTML:</p>         <p>This <em>word</em> is emphasized.</p>         <p>This <strong>word</strong> is in bold.</p>         <p>This <i>word</i> is italic.</p>         <p>This <strike>word</strike> is crossed out or struck through.</p>         <p>H<sub>2</sub>O ... a<sup>2</sup> - b<sup>2</sup> = (a + b)(a - b)</p>     </body> </html>  

Here are some examples of text decoration in HTML:

This word is emphasized.

This word is in bold.

This word is italic.

This word is crossed out or struck through.

H2O ... a2 - b2 = (a + b)(a - b)
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Comments</title>     </head>          <body>         <p>The section below is a comment:</p> <!-- This is a comment --> <!-- The user does not see this content when they access the page --> <!-- Commenting code is a good practice, it helps future maintenance -->         <p>The section above is invisible to the user</p>     </body> </html>  

The section below is a comment:

The section above is invisible to the user
 
<!DOCTYPE html> <html>     <head>         <meta charset="utf-8">         <title>Miscellaneous stuff</title>         <!-- The next line puts a little icon near the name of your page.  -->         <link rel="icon" type="image/x-icon" href="/alcor/vjorge/paginas/valdir/images/favicon.png">         <!-- Of course you have to create the image and place it in the right folder  -->     </head>          <body>         <p>Exemplo de uso de favicon</p>     </body> </html>  

Just look at the title of this page, there is a small image to its left.

Other stuff that I found interesting in the W3 site:

Volta à página principal do Valdir

Críticas, comentários e sugestões sobre esta página podem ser enviados para este endereço: valdir.jorge@gmail.com
Esta página foi atualizada pela última vez em 9 de março de 2022
http://mypage.concordia.ca/alcor/vjorge/paginas/valdir/Escolinha%20de%20HTML.html